<template>
  <div>
    <span class="ant-input-group-wrapper" style="width: 100%"
      ><span class="ant-input-wrapper ant-input-group"
        ><span
          v-if="record.options.addonBefore"
          class="ant-input-group-addon"
          >{{ record.options.addonBefore }}</span
        ><span class="ant-input-affix-wrapper">
          <a-input-number
            @change="onChange"
            style="width: 100%"
            v-model="data"
            :disabled="disabled"
            :step="record.options.step"
            :precision="record.options.precision"
            :placeholder="record.options.placeholder"
            :max="
              record.options.max ? record.options.max : Number.MAX_SAFE_INTEGER
            "
            :min="record.options.min"
            :formatter="
              (value) =>
                record.options.percentile
                  ? `${value}`
                      .replace(/[^\d.]/g, '')
                      .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
                  : value.replace(/[^\d.]/g, '')
            "
            :parser="
              (value) =>
                record.options.percentile
                  ? value.replace(/\$\s?|(,*)/g, '')
                  : value
            "
          ></a-input-number>

          <span class="ant-input-suffix"></span></span
        ><span v-if="record.options.addonAfter" class="ant-input-group-addon">{{
          record.options.addonAfter
        }}</span></span
      ></span
    >
  </div>
</template>

<script>
export default {
  name: "enumber",
  data() {
    return {
      data: undefined,
    };
  },
  props: ["value", "record", "disabled"],
  watch: {
    value(value) {
      this.data = value;
    },
  },
  created() {
    this.data = this.value;
  },
  methods: {
    onChange(value) {
      this.$emit("change", value);
    },
  },
};
</script>
<style lang="less" scoped></style>
